<!-- 技术要求 -->
<template>
    <div>
        <el-card>
            <template #header>
                <span class="title-span">API基础信息</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="节点名称：">
                    <el-input v-model="props.showFlowData.data.label"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API状态</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIState.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIState.type" disabled></el-input>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输入</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataOne.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataOne.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataOne.selectValue">
                        <el-option v-for="(item, index) in drawing_documents_selectList" :key="index"
                            :label="item.data.label.slice(0, -4)" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataTwo.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataTwo.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataTwo.selectValue">
                        <el-option v-for="(item, index) in drawing_sheet_selectList" :key="index"
                            :label="item.data.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataThree.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataThree.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataThree.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_style_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFour.name" disabled />
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFour.type" disabled />
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataFour.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_size_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFive.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFive.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataFive.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_style_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataSix.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataSix.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataSix.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_size_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataSeven.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataSeven.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    X:
                    <el-input v-model="popShowData.APIInput.dataSeven.x_data"
                        style="width: 70px; margin-right: 15px;"></el-input>
                    Y:
                    <el-input v-model="popShowData.APIInput.dataSeven.y_data" style="width: 70px;"></el-input>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataEight.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataEight.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-button type="primary" @click="handleAddText">编辑</el-button>
                    <span class="content-with-break">{{ popShowData.APIInput.dataEight.value
                        }}</span>
                    <el-button type="primary" @click="handlePreview">预览</el-button>
                </el-form-item>
            </el-form>
        </el-card>


        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输出</span>
            </template>
            <div v-for="(item, index) in APIOutput" :key="index">
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="item.type" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <technology-require-com v-if="TRCDialog" v-model:TRCDialog="TRCDialog" v-model:TRCText="TRCText" />

        <el-dialog v-model="TRCPreviewDialog" title="技术要求" width="800">
            <div>
                <span class="content-with-break1">{{ popShowData.APIInput.dataEight.value
                }}</span>
            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import technologyRequireCom from './components/technologyRequireCom.vue';
import { computed } from 'vue';
import defaultAttribute from '../utils/attribute'
const { _font_size_list, _font_color_list, _font_style_list } = defaultAttribute
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});

const TRCDialog = ref(false);
const TRCText = ref([]);
const TRCPreviewDialog = ref(false);

const popShowData = ref({
    APIBaseData: {
        name: '技术要求',
        desc: '基于图纸文件和图纸页以及视图，创建符合标准的技术要求',
    },
    APIState: {
        name: '成功',
        type: '布尔'
    },
    APIInput: {
        dataOne: {
            name: '图纸文件',
            type: '2D文档',
            selectValue: '',
        },
        dataTwo: {
            name: '图纸图页',
            type: '图页',
            selectValue: '',
        },
        dataThree: {
            name: '标题字体',
            type: '枚举',
            selectValue: '',
        },
        dataFour: {
            name: '标题字号',
            type: '枚举',
            selectValue: '',
        },
        dataFive: {
            name: '内容字体',
            type: '枚举',
            selectValue: '',
        },
        dataSix: {
            name: '内容字号',
            type: '枚举',
            selectValue: '',
        },
        dataSeven: {
            name: '实例位置',
            type: '文本',
            y_data: '',
            x_data: '',
        },
        dataEight: {
            name: '技术要求信息',
            type: '文本',
            selectValue: '',
        }
    },
    APIOutput: []
})

const node_data = computed(() => {
    let obj = {
        positionFlag: props.showFlowData.data.positionFlag,
        methodName: props.showFlowData.data.methodName,

        input2DData: popShowData.value.APIInput.dataOne.selectValue,
        sheetName: popShowData.value.APIInput.dataTwo.selectValue,

        titleFrontName: popShowData.value.APIInput.dataThree.selectValue,
        titleFrontSize: popShowData.value.APIInput.dataFour.selectValue,
        frontName: popShowData.value.APIInput.dataFive.selectValue,
        frontSize: popShowData.value.APIInput.dataSix.selectValue,

        pos: '' + popShowData.value.APIInput.dataSeven.x_data + ',' + popShowData.value.APIInput.dataSeven.y_data,

        value: popShowData.value.APIInput.dataEight.value
    }

    return obj;
});


const drawing_documents_selectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node => props.inputSelectNodeIds.includes(node.id) && node.data?.methodName === 'createDrawing')
        .map(node => {
            const newNode = JSON.parse(JSON.stringify(node));
            const label = newNode.data?.label;
            if (typeof label === 'string') {
                newNode.data.label = `${label}-图纸页`;
            }
            return newNode;
        })
);

const originalDrawingSheetSelectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node =>
            props.inputSelectNodeIds.includes(node.id) &&
            node.data?.methodName === 'createSheet'
        )
        .map(node => {
            const { data } = node;
            const newLabel =  data.label;
            return {
                ...node,
                data: {
                    ...data,
                    label: newLabel
                }
            };
        })
);

const drawing_sheet_selectList = computed(() => [
    ...drawing_documents_selectList.value,
    ...originalDrawingSheetSelectList.value
]);

const view_selectList = computed(() => {
    let nodeList = flowNodes.getFlowNodes();
    const resultList = nodeList.filter(node => props.inputSelectNodeIds.includes(node.id)).filter(node => node.data.methodName == 'createViews')
    return resultList;
});

const APIOutput = computed(() => {
    const allCheckLists = [{
        name: '技术要求',
        type: '文本'
    }];
    return allCheckLists;
});

// watch(() => props.drawer, (val) => {
//     if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
    if (val) {
        setData();// 更新数据
    }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })

watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})

watch(() => TRCText.value, (val) => {
    if (val.length >= 0) {
        // let contentList = val.map(item => item.content);
        console.log(val)
        // let contentList = val
        //     .slice() // 创建数组副本以避免修改原数组
        //     .sort((a, b) => a.id - b.id) // 按id升序排序
        //     .map(item => item.content);
        let contentList = generateNumberedContent(val);
        popShowData.value.APIInput.dataEight.value = '技术要求:\n' + contentList.join('\n');
    }



}, { deep: true }, { immediate: true })

onMounted(() => {
    getList();
    setData();
})

const generateNumberedContent = (data) => {
    // 找到 parentId 最小的节点作为顶级节点
    const minParentId = Math.min(...data.map(item => item.parentId || Infinity));
    const topLevelItems = data.filter(item => item.parentId === minParentId)
        .sort((a, b) => a.id - b.id);

    // 使用 Set 记录已处理的节点，避免重复拼接
    const processedIds = new Set();

    // 递归生成带编号的内容
    const processItems = (items, parentNumbers = []) => {
        return items.map((item, index) => {
            // 如果节点已处理，跳过
            if (processedIds.has(item.id)) {
                return '';
            }
            processedIds.add(item.id);

            // 当前层级的编号
            const currentNumbers = [...parentNumbers, index + 1];
            const prefix = currentNumbers.join('.') + '.';

            // 查找子项（parentId === 当前 item.id）
            const children = data.filter(child => child.parentId === item.id)
                .sort((a, b) => a.id - b.id);

            // 处理子项并拼接结果
            const childrenContent = children.length > 0
                ? '\n' + processItems(children, currentNumbers).join('\n')
                : '';

            return prefix + item.content + childrenContent;
        }).filter(Boolean); // 过滤掉空字符串（已跳过的节点）
    };

    return processItems(topLevelItems);
};
const getList = () => {
    if (props.showFlowData.id) {
        if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
            let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
            if (nodeData.data.popShowData) {
                popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
            }
        }
    }
}
const setData = () => {
    let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
    // 如果找到了该节点，则更新数据
    if (nodeData) {
        nodeData.data.popShowData = popShowData.value
        nodeData.data.data = node_data.value
        flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
    }
}
const reset = () => {
    popShowData.value = {
        APIBaseData: {
            name: '技术要求',
            desc: '基于图纸文件和图纸页以及视图，创建符合标准的技术要求',
        },
        APIState: {
            name: '成功',
            type: '布尔'
        },
        APIInput: {
            dataOne: {
                name: '图纸文件',
                type: '2D文档',
                selectValue: '',
            },
            dataTwo: {
                name: '图纸图页',
                type: '图页',
                selectValue: '',
            },
            dataThree: {
                name: '标题字体',
                type: '枚举',
                selectValue: '',
            },
            dataFour: {
                name: '标题字号',
                type: '枚举',
                selectValue: '',
            },
            dataFive: {
                name: '内容字体',
                type: '枚举',
                selectValue: '',
            },
            dataSix: {
                name: '内容字号',
                type: '枚举',
                selectValue: '',
            },
            dataSeven: {
                name: '实例位置',
                type: '文本',
                y_data: '',
                x_data: '',
            },
            dataEight: {
                name: '技术要求信息',
                type: '文本',
                selectValue: '',
            }
        },
        APIOutput: []
    }
}

const handleAddText = () => {
    TRCDialog.value = true;
}

const handlePreview = () => {
    TRCPreviewDialog.value = true;
}
</script>

<style scoped>
.checkbox-item-sty {
    display: block;
}

::v-deep .el-checkbox__label {
    font-size: 16px;
    /* 你可以根据需要调整字体大小 */
}

.content-with-break {
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
    white-space: pre-wrap;

    border-style: solid;
    border-width: 2px;

    border-radius: 2px;

    height: 220px;
    overflow-y: auto;
}

.content-with-break1 {
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
    white-space: pre-wrap;

    font-size: 16px;
}
</style>